<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>GitHub Readme Activity Graph</title>
        <link rel="preconnect" href="https://fonts.gstatic.com" />
        <link
            href="https://fonts.googleapis.com/css2?family=PT+Sans&display=swap"
            rel="stylesheet"
        />
        <script src="https://kit.fontawesome.com/457a315592.js" crossorigin="anonymous"></script>
        <link href="./styles.css" rel="stylesheet" />
        <link rel="icon" href="asset/logo.png" />
    </head>

    <body class="bg-color">
        <!-- Dark Theme Mode -->
        <button class="toggle-btn">
            <svg
                xmlns="http://www.w3.org/2000/svg"
                x="0px"
                y="0px"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                class="svg-sun"
            >
                <path
                    d="M 11 0 L 11 3 L 13 3 L 13 0 L 11 0 z M 4.2226562 2.8085938 L 2.8085938 4.2226562 L 4.9296875 6.34375 L 6.34375 4.9296875 L 4.2226562 2.8085938 z M 19.777344 2.8085938 L 17.65625 4.9296875 L 19.070312 6.34375 L 21.191406 4.2226562 L 19.777344 2.8085938 z M 12 5 C 8.1458514 5 5 8.1458514 5 12 C 5 15.854149 8.1458514 19 12 19 C 15.854149 19 19 15.854149 19 12 C 19 8.1458514 15.854149 5 12 5 z M 12 7 C 14.773268 7 17 9.2267316 17 12 C 17 14.773268 14.773268 17 12 17 C 9.2267316 17 7 14.773268 7 12 C 7 9.2267316 9.2267316 7 12 7 z M 0 11 L 0 13 L 3 13 L 3 11 L 0 11 z M 21 11 L 21 13 L 24 13 L 24 11 L 21 11 z M 4.9296875 17.65625 L 2.8085938 19.777344 L 4.2226562 21.191406 L 6.34375 19.070312 L 4.9296875 17.65625 z M 19.070312 17.65625 L 17.65625 19.070312 L 19.777344 21.191406 L 21.191406 19.777344 L 19.070312 17.65625 z M 11 21 L 11 24 L 13 24 L 13 21 L 11 21 z"
                ></path>
            </svg>
            <svg
                xmlns="http://www.w3.org/2000/svg"
                x="0px"
                y="0px"
                width="30"
                height="30"
                viewBox="0 0 172 172"
                class="svg-moon"
            >
                <path
                    d="M126.13333,120.4c-37.9948,0 -68.8,-30.8052 -68.8,-68.8c0,-11.18 2.72333,-21.70067 7.45333,-31.0288c-27.606,8.944 -47.58667,34.84147 -47.58667,65.4288c0,37.9948 30.8052,68.8 68.8,68.8c26.82053,0 49.99467,-15.3768 61.34667,-37.7712c-6.68507,2.1672 -13.80587,3.3712 -21.21333,3.3712z"
                ></path>
            </svg>
        </button>

        <main class="container">
            <!-- Loader -->
            <div class="loader">
                <span></span>
            </div>
            <!-- Header - Logo & Text -->
            <header class="header">
                <div class="title_container">
                    <img src="./asset/logo.svg" alt="logo" />
                    <h1 class="heading">GitHub Readme Activity Graph</h1>
                </div>
                <p class="description">
                    A dynamically generated activity graph to show your GitHub activities of last 31
                    days.
                </p>
            </header>
            <!-- Form - Input & Submit button for  Username -->
            <div class="container__item">
                <form class="form">
                    <input
                        type="username"
                        class="form__field"
                        placeholder="Enter Your GitHub Username"
                        id="username"
                    />
                    <button type="submit" class="btn btn--primary" id="submit-button">
                        Build Graph
                    </button>
                </form>
            </div>
            <!-- Split Container Contains - Color Pickers , Chart, & Copy Button -->
            <div class="split_container">
                <section class="left">
                    <div>
                        <input
                            type="color"
                            class="picker"
                            name="bgColor"
                            value="#ffcfe9"
                            id="bgColor"
                        />
                        <label for="bgColor">Background Color</label>
                    </div>
                    <div>
                        <input type="color" class="picker" name="line" value="#9e4c98" id="line" />
                        <label for="line">Line Color</label>
                    </div>
                    <div>
                        <input
                            type="color"
                            class="picker"
                            name="point"
                            value="#403d3d"
                            id="point"
                        />
                        <label for="point">Point Color</label>
                    </div>
                    <div>
                        <label for="themeSelect"><b>Theme</b></label>
                        <select id="themeSelect" class="picker">
                            <option value="default">Default</option>
                            <option value="github">GitHub</option>
                            <option value="github-light">GitHub Light</option>
                            <option value="github-compact">GitHub Compact</option>
                            <option value="github-dark">GitHub Dark</option>
                            <option value="github-dark-dimmed">GitHub Dark Dimmed</option>
                            <option value="dracula">Dracula</option>
                            <option value="gruvbox">Gruvbox</option>
                            <option value="gotham">Gotham</option>
                            <option value="rogue">Rogue</option>
                            <option value="xcode">Xcode</option>
                            <option value="redical">Redical</option>
                            <option value="coral">Coral</option>
                            <option value="react">React</option>
                            <option value="react-dark">React Dark</option>
                            <option value="nord">Nord</option>
                            <option value="lucent">Lucent</option>
                            <option value="chartreuse-dark">Chartreuse Dark</option>
                            <option value="minimal">Minimal</option>
                            <option value="material-palenight">Material Palenight</option>
                            <option value="green">Green</option>
                            <option value="noctis-minimus">Noctis Minimus</option>
                            <option value="one-dark">One Dark</option>
                            <option value="monokai">Monokai</option>
                            <option value="elegant">Elegant</option>
                            <option value="aqua">Aqua</option>
                            <option value="synthwave-84">Synthwave-84</option>
                            <option value="merko">Merko</option>
                            <option value="vue">Vue</option>
                            <option value="tokyo-day">Tokyo Day</option>
                            <option value="tokyo-night">Tokyo Night</option>
                            <option value="high-contrast">High Contrast</option>
                            <option value="cobalt">Cobalt</option>
                            <option value="material">Material</option>
                            <option value="nightowl">Night Owl</option>
                            <option value="modern-lilac">Modern Lilac</option>
                            <option value="arctic">Arctic</option>
                        </select>
                    </div>
                    <div>
                        <input
                            type="color"
                            class="picker"
                            name="color"
                            value="#9e4c98"
                            id="color"
                        />
                        <label for="color">Text Color</label>
                    </div>
                </section>
                <section class="right">
                    <div class="rect">
                        <div class="chart_placeholder active">
                            <p class="placeholder_text">Your graph will be visible here.</p>
                        </div>
                        <div class="ct-chart"></div>
                    </div>

                    <div class="copy_container">
                        <div class="copy_text">
                            <input
                                type="text"
                                class="text"
                                placeholder="Build your graph to generate the link."
                                value=""
                                disabled
                            />
                            <button>
                                <img
                                    height="20px"
                                    width="20px"
                                    src="https://clipboardjs.com/assets/images/clippy.svg"
                                    alt="copy-text"
                                />
                            </button>
                        </div>
                    </div>
                </section>
            </div>
            <!-- Footer - Text & Link -->
            <footer class="footer">
                <p><b>More Info : </b></p>
                <a
                    class="link github"
                    href="https://github.com/Ashutosh00710/github-readme-activity-graph"
                >
                    <i class="fab fa-2x fa-github"></i>
                </a>
            </footer>
        </main>
    </body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.11.4/chartist.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartist-plugin-axistitle@0.0.7/dist/chartist-plugin-axistitle.min.js"></script>
    <script src="./script.js"></script>
</html>
